<route lang="json5">
{
  style: {
    navigationStyle: 'default',
    navigationBarTitleText: '农商管理',
  },
}
</route>
<template>
  <div class="h-[100vh] py-10 px-8 box-border bg-[#f7f7f7]">
    <div class="mb-10 text-[#333333] text-[24px]">手机验证码登录</div>
    <wd-form ref="form" :model="model">
      <wd-cell-group>
        <div class="form-item pb-5 bg-[#f7f7f7]">
          <wd-input
            label=""
            label-width="100px"
            prop="mobile"
            clearable
            custom-class="custom-class-content"
            custom-input-class="ns-input"
            v-model="model.mobile"
            placeholder="请输入手机号码"
            :rules="[{ required: true, message: '请填写手机号码' }]"
          />
        </div>
        <div class="form-item pb-5 bg-[#f7f7f7]">
          <div class="flex items-center">
            <div class="form-control" style="flex: 1">
              <wd-input
                label=""
                label-width="100px"
                prop="code"
                clearable
                custom-class="custom-class-content"
                custom-input-class="ns-input"
                v-model="model.code"
                placeholder="请输入手机验证码"
                :rules="[{ required: true, message: '请填写手机验证码' }]"
              />
            </div>
            <div class="text-[#56b756] text-[12px]" style="margin-left: 13px" @click="getCode">{{ codeText }}</div>
          </div>
        </div>
      </wd-cell-group>
    </wd-form>
    <div class="mt-4 text-[15px] text-[#666666]">
      <wd-checkbox v-model="agree" shape="square">
        已阅读并同意
        <span class="text-[#56b756]" @click="toProtocol">“用户服务协议”</span>
      </wd-checkbox>
    </div>
    <!-- 登录 -->
    <div class="login mt-15" @click="handleSubmit">登录</div>
  </div>
</template>
<script setup lang="ts">
import { useStorage } from "@/utils/storage";
import {loginByPhone, sendCode} from "@/service/login";
import {useToast} from "wot-design-uni";

const { get } = useStorage()
const model = reactive<{
  // // 地址
  // address: string
  // // 详细地址
  // detailAddress: string
  // // 用户姓名
  // username: string
  // 手机号码
  mobile: string
  // 验证码
  code: string
  // openid
  openid: string
}>({
  // address: '',
  // detailAddress: '',
  // username: '',
  mobile: '',
  code: '',
  openid: '',
})
const agree = ref(false)
const form = ref()
const toast = useToast()
const { setToken } = useStorage()
function handleSubmit() {
  console.log(form.value)
  if (!agree.value) {
    return toast.show('请先同意用户服务协议')
  }
  form.value
    .validate()
    .then(async ({ valid, errors }) => {
      if (valid) {
        model.openid = get('openid')
        const res: any = await loginByPhone(model)
        if (res.code === 1) {
          toast.success('登录成功')
          setToken(res.data.token)
          setTimeout(() => {
            uni.redirectTo({
              url: '/pages/user/updateInfo/index',
            })
          }, 1000)
        } else {
          toast.show(res?.msg)
        }
        console.log('success', res)
      }
    })
    .catch((error) => {
      console.log(error, 'error')
    })
}
const toProtocol = () => {
  uni.navigateTo({
    url: '/pages/protocol/index',
  })
}
// 获取验证码
const codeText = ref('获取验证码')
const getCode = async () => {
  if (codeText.value !== '获取验证码') return
  // 手机号验证正则
  const reg = /^1[3456789]\d{9}$/
  if (!reg.test(model.mobile)) return toast.show('请输入正确的手机号')
  const res: IResData<any> = await sendCode(model.mobile)
  if (res.code === 1) {
    toast.show('验证码发送成功')
    let time = 30
    codeText.value = `${time}s后重新获取`
    const timer = setInterval(() => {
      time--
      if (time <= 0) {
        clearInterval(timer)
        codeText.value = '获取验证码'
      } else {
        codeText.value = `${time}s后重新获取`
      }
    }, 1000)
  }
}
</script>
<style scoped>
:deep(.wd-input) {
  border-radius: 16rpx !important;
}

.login {
  border-radius: 4px;
  background: #56b756;
  width: 100%;
  height: 40px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #fff;
}
</style>
